<template>
    <!-- 定义一个可复用的头部组件，使用 div 作为容器 -->
    <div class="header-component">
        <h1>我是头部组件</h1>
        <h1 v-if="param.a">我拿到的参数是：{{ param.a }}</h1>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
// 定义 props，接收一个名为 'a' 的字符串类型参数
const param = defineProps(['a'])

</script>

<style scoped>
.header-component {
  /* 可以添加样式，确保组件在不同页面显示一致 */
  color: blueviolet;
  margin: 0;
  background-color: #f0f0f0;
  padding: 10px;
  /* 可以添加更多样式，确保组件在不同页面显示一致 */
}
</style>
